<template>
    <div class="shop adSpaceManagement">
        <div style="display: flex;justify-content: space-between">

        <el-form :inline="true"
                 size="mini"
                 class="form">
            <el-form-item>
                <el-button class="addBtn" type="primary" @click="isShowDetaild">新增</el-button>
            </el-form-item>
        </el-form>
        <el-form :inline="true"
                 size="mini"
                 :model="form"
                 class="form">
            <el-form-item label="关键字:">
                <el-input class="input" v-model="form.name" placeholder="输入关键字" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchShopMin">搜索</el-button>
            </el-form-item>

        </el-form>
        </div>
        <el-table
                :data="tableData"
                style="width:100%"
                max-height="600"
                class="shop_table_list"
                :cell-style="tc"
                :header-cell-style="tccolor"
        >
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="分类名称"></el-table-column>
            <el-table-column prop="order_num" label="排序"></el-table-column>

            <el-table-column label="操作" fixed="right" width="160">
                <template slot-scope="scope">
                    <el-button size="mini" @click="openShopMinDetail(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteShopMin(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-col :span="24">
            <div class="pagination">
                <el-pagination
                        background
                        @current-change="pageChange"
                        :current-page="form.page"
                        :page-size="20"
                        layout="total, prev, pager, next, jumper"
                        :total="total"
                ></el-pagination>
            </div>
        </el-col>

        <jdialog
                title="新增帮助分类"
                :visible.sync="isShowDetail"
                width="600px">
            <el-row class="shop_info_dalog">
                <el-col :span="4">分类名称:</el-col>
                <el-col :span="8">
                    <el-input placeholder v-model="addlist.name"></el-input>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">排序:</el-col>
                <el-col :span="8">
                    <el-input placeholder v-model="addlist.order_num"></el-input>
                </el-col>
            </el-row>
            
        

            <div class="dialog-footer">
                <el-button size='mini' @click="isShowDetailf">取 消</el-button>
                <el-button size='mini' type="primary" @click="submitGoods">确 定</el-button>
            </div>
        </jdialog>
        <jdialog
                title="修改帮助分类"
                :visible.sync="isShowUpdate"
                width="600px">
            <el-row class="shop_info_dalog">
                <el-col :span="4">分类名称:</el-col>
                <el-col :span="8">
                    <el-input placeholder v-model="addlist.name"></el-input>
                </el-col>
            </el-row>
            <el-row class="shop_info_dalog">
                <el-col :span="4">排序:</el-col>
                <el-col :span="8">
                    <el-input placeholder v-model="addlist.order_num"></el-input>
                </el-col>
            </el-row>

            <div class="dialog-footer">
                <el-button size='mini' @click="isShowUpdate=false">取 消</el-button>
                <el-button size='mini' type="primary" @click="submitGoodsInfo">确 定</el-button>
            </div>
        </jdialog>


    </div>
</template>

<script>
    import errorImg from "@/assets/images/error_img.png";
    // import uploadImg from "@/components/uploadImg";
    import {
        qaCatList,
        qaCatDelete,
        qaCatUpdate,
        qaCatCreate
    } from "@/api/goods";

    // import shopadministrationdetail from './shopadministrationdetail'
    export default {
        name: "bursting",
        components: {
            // uploadImg
        },
        mounted() {
            this.type = Number(this.$route.query.type) || 0
            this.getProductListData();
        },
        data() {
            return {
                type: 0,
                addlist:{
                    name:'',
                    order_num: ""
                },
                //展示详情
                isShowDetail: false,
                errorImg,
                form: {
                    name: "",
                    page: 1
                },
                total: 0,
                tableData: [],
                //商品详情
                productDetail: {},
                //图片列表
                img_url: [],
                isShowUpdate:false
            };
        },
        methods: {
            isShowDetailf(){
              this.isShowDetail=false
              this.addlist= {
                  name:'',
                  order_num:'',
              }
            },
            isShowDetaild(){
              this.isShowDetail=true
              this.addlist= {
                  name:'',
                  order_num:'',
              }
            },
            //排序
            labelwidthChange(id, width) {
                adboardupdate({id, width}).then(res => {
                    this.$message.success(res.message)
                })
            },
            labelheightChange(id, height) {
                adboardupdate({id, height}).then(res => {
                    this.$message.success(res.message)
                })
            },
            tc() {
                return "text-align:center; color:#333333; font-size:12px;";
            },
            tccolor() {
                return "text-align:center;background-color:#f5f5f5; font-size:14px;";
            },
            //获取商品列表
            async getProductListData() {
                var url =
                    "name=" + this.form.name +
                    "&page=" + this.form.page;
                let res = await qaCatList(url);
                this.tableData = res.data.data;
                this.total = res.data.total;
            },
            //根据关键词重新获取小店
            searchShopMin() {
                this.getProductListData();
            },
            pageChange(page) {
                this.form.page = page;
                this.getProductListData();
            },

            async isUseActivityChange(id, e) {
                if (e === 1) {
                    //下架
                    this.getDownProductData(id);
                } else {
                    //上架
                    this.getUpProductData(id);
                }
            },
            //发布
            async getUpProductData(id) {
                let res = await adboardupdate({id,status:1});
                if (res.code === 10000) {
                    this.$message.success("发布成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
            },
            //取消发布
            async getDownProductData(id) {
                let res = await adboardupdate({id,status:0});
                if (res.code === 10000) {
                    this.$message.success("取消发布成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
            },

            //删除商品
            async getDeleteProductData(cid) {
                let res = await qaCatDelete({id: cid});
                if (res.code === 10000) {
                    this.$message.success("删除成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
            },
            //查看详情
            openShopMinDetail(e) {
                this.isShowUpdate = true;
                // this.getProductDetailInfoData(id);
                console.log(e)
                this.addlist = e
            },

            //删除
            deleteShopMin(id) {
                this.$confirm('确认删除', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    this.getDeleteProductData(id);
                }).catch(() => {
                    console.log('cancel')
                });

            },

            //获取商品图片
            getFile(file) {
                if (file.files && file.files.length && file.name == 'shopadministration_pic_list') {
                    this.img_url = file.files.map(obj => obj.url)
                }
            },
            //修改商品点击确定
            submitGoods() {
                this.getEditProductData();
            },
            //修改商品点击确定
            submitGoodsInfo() {
                this.getUpdateData();
            },

            //新增商品
            async getEditProductData() {
                var form = {
                    name: this.addlist.name,
                    order_num: this.addlist.order_num,
                };
                console.log(form);
                let res = await qaCatCreate(form);
                if (res.code === 10000) {
                    this.$message.success("新增成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
                this.isShowDetail = false;
            },
            //编辑商品
            async getUpdateData() {
                var form = {
                    name: this.addlist.name,
                    order_num: this.addlist.order_num,
                    id: this.addlist.id,
                };
                console.log(form);
                let res = await qaCatUpdate(form);
                if (res.code === 10000) {
                    this.$message.success("编辑成功");
                    this.getProductListData();
                } else {
                    this.$message.error(res.message);
                }
                this.isShowUpdate = false;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .shop {
        padding: 20px;
        position: relative;

        .search {
            float: right;
            .input {
                width: 200px;
            }
        }
        .shop_table_list {
            margin-top: 20px;
        }
        .shop_title {
            font-weight: 700;
        }

        .pagination {
            float: right;
        }
        .status—desc {
            display: inline;
            margin-left: 5px;
        }

        .img_main {
            color: #ffffff;
            background-color: #f4222d;
            width: 60px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 10%;
            margin-left: 30px;
            // z-index: !important;
        }
        .shop_info_dalog {
            margin-top: 20px;
            padding: 0 20px;
        }
        .dialog-footer {
            margin: 20px 0;
            text-align: center;
        }
    }
</style>
<style>
    .adSpaceManagement .el-input__inner{
        height: 30px!important;
    }
</style>
